<template>
  <section>
    <!--工具条-->
    <el-form :inline="true" :model="searchForm" class="toolbar">
      <el-form-item label="活动专题">
        <el-select v-model="searchForm.activitySubject" placeholder="请选择" clearable>
          <el-option v-for="item in activitySubject" :label="item.title" :key="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动主题">
        <el-input v-model="searchForm.activityTitle"></el-input>
      </el-form-item>
      <el-form-item label="活动状态">
        <el-select v-model="searchForm.status" placeholder="请选择" clearable>
          <el-option v-for="item in status" :label="item.name" :key="item.code" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="info">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="publishActivity" type="success" v-if="publishButton">发布</el-button>
      </el-form-item>
    </el-form>
    <div class="divid-line"></div>
    <!--列表-->
    <template>
      <el-table :data="gridData" highlight-current-row v-loading="gridLoading" class="grid">
        <el-table-column label="序号" type="index" width="100">
        </el-table-column>
        <el-table-column label="活动专题" prop="activitySubject" width="120" sortable>
        </el-table-column>
        <el-table-column label="活动主题" prop="title" width="120" sortable>
        </el-table-column>
        <el-table-column label="开始时间" prop="startTime" width="120" sortable>
          <template scope="scope">
            {{getdate(scope.row.startTime)}}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="endTime" width="120" sortable>
          <template scope="scope">
            <span>{{getdate(scope.row.endTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="报名人数" prop="persionCount" width="118" sortable>
        </el-table-column>
        <el-table-column label="人数上线" prop="requireCount" width="118" sortable>
        </el-table-column>
        <el-table-column label="实到人数" prop="attendanceCount" width="118" sortable>
        </el-table-column>
        <el-table-column label="活动状态" prop="status" width="120" sortable>
          <template scope="scope">
            {{getStatus(scope.row.status)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="remark" width="200">
          <template scope="scope">
            <el-button size="small" @click="lookDetail(scope.row)" type="info">查看</el-button>
            <el-button size="small" @click="handleEdit(scope.row)" type="primary" v-if ="editButton && scope.row.isOrganizer">编辑</el-button>
            <el-button size="small" type="warning" @click="deleteActivity(scope.row)" v-if ="deleteButton && scope.row.isOrganizer">删除</el-button>
            <el-button size="small" type="success" @click="attendActivity(scope.row)" v-if ="attendButton && !scope.row.attend">报名</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination class="pager" @size-change="pageSizeChange" @current-change="pageIndexChange" :current-page="pageIndex" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="dataTotal">
      </el-pagination>



      <!--<el-dialog-->
      <!--title="发布活动"-->
      <!--:visible.sync="acitvityVisible"-->
      <!--width="100%"-->
      <!--v-loading="activityDialogLoading">-->

      <!--<span slot="footer" class="dialog-footer">-->
      <!--<el-button @click="activityBack">取 消</el-button>-->
      <!--<el-button type="primary" @click="phoneCheckCommit(dialogType)">确 定</el-button>-->
      <!--</span>-->
      <!--</el-dialog>-->
    </template>
  </section>
</template>
<script>
  import enums from '../../common/Enum'
  import DataUtil from '../../common/dataUtil'
  import Config from '../../common/config'
  export default {
    data () {
      let compareDate = (time, form, txt, type) => {
        let _cp1 = time.getTime() >= Date.now()
        let _cp2 = false
        let _input = this[form][txt]
        if (_input) {
          let _time = Date.parse(new Date(_input))
          if ((type == "s" && time.getTime() > _time) || (type == "e" && time.getTime() < _time)) {
            _cp2 = true
          }
        }
        return _cp1 || _cp2
      }
      return {
        searchForm:{
          activitySubject:'',
          activityTitle:'',
          status:'',
        },

        activitySubject:[],
        status:[{
          code:'1',
          name:'未开始',
        },{
          code:'2',
          name:'正在进行'
        },{
          code:'3',
          name:'已结束'
        }],
        dataTotal:0,
        gridLoading: true,
        pageIndex: 1,
        pageSize: 10,
        gridData:[],
        acitvityVisible: false,
        activityDialogLoading: false,

        editButton: true,
        deleteButton: true,
        publishButton: true,
        attendButton: true,
      }
    },
    methods: {
      getActivitySubject() {

        this.$http.post('activity/listActivitySubject',{}).then(response => {
          if (response.body.code == 1) {
            this.activitySubject = response.body.data;
          }
        });
      },
      getdate(dates) {
        if(!dates){
          return '';
        }
        var myDate = new Date(dates);
        let minute=myDate.getMinutes();
        if(minute<10){
          minute="0"+minute;
        }
        let seconds=myDate.getSeconds()
        if(seconds<10){
          seconds="0"+seconds;
        }
        return myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate()+" "+myDate.getHours()+":"+minute+":"+seconds
      },
      getStatus(type) {
        let re = '';
        this.status.forEach(obj => {
          if (obj.code == type) {
            re = obj.name;
            return
          }
        });
        return re
      },
      search() {
        this.bindGrid()
      },
      publishActivity() {
        window.open('#/PublishOrginzerTrain?id=0&type=2');
//      window.close();
      },
      activityBack() {
        this.acitvityVisible = false;
        this.activityDialogLoading = false;
      },
      pageSizeChange(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.bindGrid()
      },
      pageIndexChange(val) {
        this.pageIndex = val;
        this.$store.dispatch('getUserListIndex',val);
        this.bindGrid();
      },
      bindGrid() {
        this.gridLoading = true;
        // let _data = Object.assign(this.searchForm);
        let _data = Object.assign({

          attendUserId : DataUtil.id(),
          pageNo:this.pageIndex,
          type:2,
          pageSize:this.pageSize}, this.searchForm);
        this.$http.post('activity/listActivity', _data).then(response => {
          if (1 == response.body.code) {
            this.gridLoading = false;
            this.gridData = response.body.data.list;
            this.dataTotal = response.body.data.total;

            //判断按钮权限
            let userRole = DataUtil.userRole();
            if (userRole == 1) {
              this.editButton = false;
              this.deleteButton = false;
              this.publishButton = false;
            } else {
              this.attendButton = false;
            }

          } else {
            this.$message.error(body.message);
          }
        }).catch((e) =>{
          this.gridLoading = false;
        })
      },
      handleEdit(row) {
        window.open('#/PublishOrginzerTrain?id='+row.id + "&type=2" );
      },
      lookDetail(row) {
        window.open('#/ActivityDetail?id='+row.id + "&type=2" );
      },
      deleteActivity(row) {
        this.$confirm('此操作会删除该活动, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('activity/deleteActivityById',{"id":row.id}).then(response => {
            if (response.body.code == 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.bindGrid();
            }
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      attendActivity(row) {

        let _data = {
          activityTitle: row.title,
          id : row.id,
          userId: 1,
          activityStartTime: row.startTime
        };

        this.$http.post('activity/attendActivity',_data).then(response => {
          if (response.body.code == 1) {
            if (response.body.data) {
              this.$message({
                type: 'success',
                message: '报名成功，活动前若没有邮件通知，请按时参加!'
              });
            } else {
              this.$message({
                //这里需要因为自己的参加活动时间，没有已经参加的人多
                type: 'success',
                message: '抱歉，参加活动人数已满!'
              });
            }

            this.bindGrid();
          } else {
            this.$message.error(response.body.message);
          }
        });
      }
    },
    mounted: function () {
      this.bindGrid();
      this.getActivitySubject();
    }
  }
</script>
